<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="'\u4f60\u597d'">Insert title here</title>

<link rel="stylesheet" href="css/1140.css" th:href="@{/css/1140.css}" type="text/css" media="screen" />
	
<link rel="stylesheet" href="css/normalize.css" th:href="@{/css/normalize.css}"/>
<link rel="stylesheet" href="css/main.css" th:href="@{/css/main.css}"/>
<link rel="stylesheet" href="css/css.css" th:href="@{/css/css.css}"/>
<link rel="stylesheet" href="css/jquery.dataTables_themeroller.css" th:href="@{/css/jquery.dataTables_themeroller.css}"/>
    
<script src="js/vendor/modernizr-2.6.2.min.js" th:src="@{/js/vendor/modernizr-2.6.2.min.js}"></script>
<script src="js/vendor/css3-mediaqueries.js" th:src="@{/js/vendor/css3-mediaqueries.js}"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
<script th:inline="javascript">/*<![CDATA[*/
window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
		+'"><\/script>')
/*]]>*/</script>
<script src="js/vendor/jquery.dataTables.min.js" th:src="@{/js/vendor/jquery.dataTables.min.js}"></script>
<script src="js/plugins.js" th:src="@{/js/plugins.js}"></script>
<script src="js/main.js" th:src="@{/js/main.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var datatable;
$(function(){
	datatable = $('#datatable').dataTable({
		sAjaxSource: /*[[@{/admin/commission/needPayAccount}]]*/'admin/person/p'
		, sDom: '<rltip>'
		, sPaginationType: 'full_numbers'
		, sServerMethod: 'POST'
		, bServerSide: true
		, aoColumns: [
			{mData: 'accountNo', sTitle: 'account No'}
			, {mData: 'brokerName', sTitle: 'broker name'}
			, {mData: 'totalCommission', sTitle: 'total Commission'}
			, {mData: 'totalPayed', sTitle: 'totalPayed'}
			, {sTitle: 'operation', mData: function(data){
				return '<button onclick="refundDone(\''+data.accountNo+'\', \''+data.brokerName+'\')">'+ /*[[#{admin.js.refundDone}]]*/''
					+'</button>';
			}}
          ]
		, fnServerParams: function ( aoData ) {
			aoData.push(
					{name: 'accountNo', value: $('#accountNo').val()}
					, {name: 'brokerName', value: $('#brokerName').val()}
					);
		}
	});
	
	$('#search-btn').click(function(){
		datatable.fnPageChange(0);
	});
});
function refundDone(accountNo, brokerName){
	var c = window.prompt(/*[[#{admin.js.refundMoney}]]*/''
				);
	if(isNaN(c)){
		alert(/*[[#{admin.js.refundMoneyNaN}]]*/''
				);
		return;
	}
	$.ajax({
		url: /*[[@{/admin/commission/refundDone}]]*/''
		, type: 'POST'
		, dataType: 'json'
		, data: {accountNo: accountNo, brokerName: brokerName, commissionRefund: c}
		, error: function(jqXHR, textStatus, errorThrown){
			datatable.fnPageChange(0);
		}
		, success: function(data, textStatus, jqXHR){
			datatable.fnPageChange(0);
		}
	});
}
/*]]>*/
</script>
</head>
<body>
<div class="grid">
	<div class="row">
		<ul id="search-ul">
			<li>
				<label for="accountNo">accountNo: </label>
				<input id="accountNo" style="width: 120px;"/>
			</li>
			<li>
				<label for="brokerName">brokerName: </label>
				<input id="brokerName" style="width: 120px;"/>
			</li>
			<li>
				<button id="search-btn">search</button>
			</li>
		</ul>
	</div>
	<div class="row">
		<table id="datatable"></table>
	</div>
</div>
</body>
</html>